<template>
  <div class="map-box">
    <template v-if="lnglat && lnglat.length > 0">
      <div v-loading="loading" id="MapContainer"></div>
    </template>
    <template v-else> 当天无数据，可以筛选日期，查看往期数据 </template>
    <!-- 运动计步 -->
    <exercisePedometer
      v-if="lnglat && lnglat.length > 0"
      :student_info="student_info"
      :week_trip="week_trip"
      :day_trip="day_trip"
      :visible.sync="isShowExercise"
      @closeDrawer="isShowExercise = $event"
    ></exercisePedometer>
    <!-- 终端设置 -->
    <terminalSetting
ref="terinalSetting"
      v-if="lnglat && lnglat.length > 0"
      :student_info="student_info"
      :visible.sync="isShowSetting"
      @closeDrawer="isShowSetting = $event"
    ></terminalSetting>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import exercisePedometer from "./exercisePedometer.vue";
import terminalSetting from "./terminalSetting.vue";
export default {
  name: "map-view",
  components: {
    exercisePedometer,
    terminalSetting,
  },
  props: [
    "lnglat",
    "student_info",
    "location_list",
    "week_trip",
    "day_trip",
    "belongTime",
  ],
  data() {
    return {
      locationData: {},
      loading: false,
      // 地图实例
      mapExample: null,
      // 标记点
      marker: null,
      // 信息弹窗
      inforwindow: null,
      // 轨迹
      pathSimplifierIns: null,
      isShowExercise: false,
      isShowSetting: false,
    };
  },
  watch: {
    lnglat: {
      handler: function () {
        console.log("new", this.lnglat);
        this.$nextTick(() => {
          this.initAMap();
        });
      },
      deep: true,
    },
    student_info: {
      handler: function () {
        this.$nextTick(() => {
          this.initAMap();
        });
      },
      deep: true,
    },
  },
  created() {
    window.refreshLocation = () => {
      this.refreshLoc();
    };
    window.lineReview = () => {
      this.reviewLine();
    };
    window.toSport = () => {
      if (this.day_trip && this.day_trip.length) {
        this.isShowExercise = true;
      } else {
        this.$message.info("暂无数据");
      }
    };
    window.toSetting = () => {
      this.isShowSetting = true;
this.$refs.terinalSetting.queryterminalrelative();
    };
  },
  mounted() {},
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    getLocationInfo() {
      this.$emit("getLocationInfo");
    },
    initAMap() {
      this.loading = true;
      window._AMapSecurityConfig = {
        securityJsCode: "2feef184c48ddcbf9e1d1e675173fa6d",
      };
      AMapLoader.load({
        key: "a8495fcc75776a9eb1a4f3e907f0b84e", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          this.mapExample = AMap;
          // console.log("this.student_info",this.student_info,this.lnglat)
          let locationData =
            this.lnglat && this.lnglat.length
              ? this.lnglat[this.lnglat.length - 1]
              : this.student_info;
          // 初始化地图
          this.map = new AMap.Map("MapContainer", {
            viewMode: "3D", // 是否为3D地图模式
            zoom: 14, // 初始化地图级别
            center: [locationData.lng, locationData.lat], // 初始化地图中心点位置
          });
          // 初始化标记点
          this.marker = new AMap.Marker({
            position: [locationData.lng, locationData.lat],
          });
          // 标记点添加click事件
          // this.marker.on("click", () => {

          // });
          this.map.add(this.marker);
          this.setInfoWindow();
          this.loading = false;
        })
        .catch((e) => {
          console.log(e);
          this.loading = false;
        });
    },
    setInfoWindow() {
      console.log(1);
      let Amap = this.mapExample;
      let lastloc = this.location_list.length
        ? this.location_list[this.location_list.length - 1]
        : null;
      let status = this.student_info.is_active == 1 ? "在线" : "离线";
      let content =
        '<div class="info">' +
        '<div class="title">个人信息</div>' +
        '<div class="info-wrap" style="justify-content: space-between;">' +
        "<span>学号：" +
        this.student_info.student_no +
        "</span>" +
        '<b style="color:#60762d">状态：' +
        status +
        "</b>" +
        '<em style="color:#dc2617">电量：' +
        this.student_info.electricity_level +
        "%</em>" +
        "</div>" +
        '<div class="info-wrap">' +
        "<span>时间：" +
        this.$util.toDateString(lastloc.create_time) +
        "</span>" +
        "</div>" +
        '<div class="info-wrap">' +
        "<span><strong>IMEI</strong>：" +
        this.student_info.imei +
        "</span>" +
        "</div>" +
        '<div class="info-wrap">' +
        "<span>手机：" +
        this.student_info.phone +
        "</span>" +
        "</div>" +
        '<div class="info-wrap">' +
        "<span>位置：" +
        lastloc.address +
        "</span>" +
        "</div>" +
        '<div class="btn-group">' +
        '<button onclick="refreshLocation()" type="button" class="el-button el-button--primary el-button--small el-button--default">更新定位</button>' +
        '<button onclick="lineReview()" type="button" class="el-button el-button--primary el-button--small el-button--default">轨迹回放</button>' +
        '<button onclick="toSport()" type="button" class="el-button el-button--primary el-button--small el-button--default">运动记步</button>' +
        '<button onclick="toSetting()" type="button" class="el-button el-button--primary el-button--small el-button--default">终端设置</button>' +
        "</div>" +
        '<img src="https://webapi.amap.com/images/sharp.png"></div>';
      // 初始化信息弹窗
      this.inforwindow = new Amap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: content,
        offset: new Amap.Pixel(16, -45),
      });
      this.inforwindow.open(this.map, this.map.getCenter());
    },
    refreshLoc() {
      this.getLocationInfo();
    },
    reviewLine() {
      this.loading = false;
      let Amap = this.mapExample;
      let lineArr = [];
      this.lnglat &&
        this.lnglat.forEach((item) => {
          lineArr.push([item.lng, item.lat]);
        });
      if (lineArr.length > 0) {
        let lineMarker = new Amap.Marker({
          position: lineArr[lineArr.length - 1],
          icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
          offset: new Amap.Pixel(-13, -26),
        });
        var polyline = new Amap.Polyline({
          map: this.map,
          path: lineArr,
          showDir: true,
          strokeColor: "#28F", //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6, //线宽
          // strokeStyle: "solid"  //线样式
        });
        console.log(polyline);
        let passedPolyline = new Amap.Polyline({
          map: this.map,
          strokeColor: "#AF5", //线颜色
          strokeWeight: 6, //线宽
        });
        lineMarker.on("moving", function (e) {
          passedPolyline.setPath(e.passedPath);
          this.map?.setCenter(e.target.getPosition(), true);
        });
        lineMarker.moveAlong(lineArr, {
          // 每一段的时长
          duration: 500, //可根据实际采集时间间隔设置
          // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
          autoRotation: true,
        });
      } else {
        this.$message.warning("暂未查询到运动轨迹！");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#MapContainer {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
  ::v-deep .amap-maps {
    .info {
      width: 390px;
      height: 230px;
      padding: 15px;
      color: #333333;
      position: relative;
      background-color: #fff;
      .title {
        font-size: 16px;
        line-height: 32px;
      }
      .info-wrap {
        font-size: 14px;
        line-height: 28px;
        display: flex;
        justify-content: flex-start;
      }
      .btn-group {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
      }
      img {
        width: 30px;
        height: 23px;
        position: absolute;
        left: calc(50% - 15px);
        bottom: -23px;
      }
    }
  }
}
</style>
